<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Draw Page Elements to Canvas</title>  
<style>  
    #canvasContainer {  
        position: relative;  
        width: 500px;  
        height: 500px;  
    }  
    .textElement {  
        position: absolute;  
        color: blue;  
        font-family: Arial, sans-serif;  
    }  
</style>  
</head>  
<body>  
  
<div id="canvasContainer">  
    <canvas id="myCanvas" width="500" height="500"></canvas>  
    <div class="textElement" style="top: 50px; left: 50px;">Hello</div>  
    <div class="textElement" style="top: 100px; left: 100px;">World</div>  
</div>  
  
<script>  
    // 获取画布和渲染上下文  
    const canvas = document.getElementById('myCanvas');  
    const ctx = canvas.getContext('2d');  
  
    // 获取页面上的文本元素  
    const textElements = document.querySelectorAll('.textElement');  
  
    // 遍历并绘制文本元素  
    textElements.forEach(element => {  
        // 获取元素的样式和位置  
        const style = window.getComputedStyle(element);  
        const top = parseInt(style.getPropertyValue('top'), 10);  
        const left = parseInt(style.getPropertyValue('left'), 10);  
        const color = style.getPropertyValue('color');  
        const fontSize = parseInt(style.getPropertyValue('font-size'), 10);  
        const fontFamily = style.getPropertyValue('font-family');  
  
        // 应用样式到画布上下文  
        ctx.font = `${fontSize}px ${fontFamily}`;  
        ctx.fillStyle = color;  
  
        // 绘制文本到画布  
        ctx.fillText(element.textContent, left, top);  
    });  
</script>  
  
</body>  
</html>